1
00:00:00,420 --> 00:00:08,310
現在我們知道按下了哪個鍵以及如何獲取其innerHTML，我們如何播放不同的內容

2
00:00:08,310 --> 00:00:10,850
聲音取決於按下的鍵？

3
00:00:11,280 --> 00:00:18,300
好吧，你可能會想到我們在 Javascript 模組簡介中學到的 if else 語句，

4
00:00:18,960 --> 00:00:22,480
但實際上一共有七把鑰匙

5
00:00:22,500 --> 00:00:26,380
所以我們必須寫很多 if else 語句。

6
00:00:26,460 --> 00:00:32,610
現在在這個領域實際上更容易編寫所謂的 switch 語句，就像

7
00:00:32,640 --> 00:00:34,170
鐵路道岔，

8
00:00:34,340 --> 00:00:39,820
它會根據變數的值將程式碼帶到不同的軌道。

9
00:00:39,840 --> 00:00:44,140
因此，讓我們刪除這行程式碼，然後開始編寫 switch 語句。

10
00:00:44,130 --> 00:00:50,280
現在在 Atom 中，一旦您開始編寫單字 switch，我們的自動建議就會提供協助

11
00:00:50,280 --> 00:00:53,570
你是 Javascript switch 語句的骨架。

12
00:00:53,760 --> 00:00:58,850
因此，如果你按下回車鍵，它就會告訴你它應該是什麼樣子的。

13
00:00:59,580 --> 00:01:03,760
所以你可以看到這裡的關鍵字，而不是if，是switch。

14
00:01:04,050 --> 00:01:10,110
然後我們有一組括號，其中包括表達式或我們正在做的事情

15
00:01:10,110 --> 00:01:11,690
即將開啟。

16
00:01:11,790 --> 00:01:18,480
在我們的例子中，我們將開啟每個 innerHTML 中的字母

17
00:01:18,480 --> 00:01:19,210
按鈕。

18
00:01:19,260 --> 00:01:22,190
因此，讓我們建立一個保存該值的變數。

19
00:01:22,260 --> 00:01:29,490
所以我們將其稱為buttonInnerHTML，並將其設為等於此，

20
00:01:29,490 --> 00:01:34,420
所以請記住，這是觸發事件的按鈕，.innerHTML。

21
00:01:34,710 --> 00:01:43,300
現在讓我們切換按鈕的innerHTML，並且根據情況，我們將告訴它執行不同的操作。

22
00:01:43,590 --> 00:01:48,030
所以第一種情況是如果它等於w。

23
00:01:48,300 --> 00:01:54,400
所以請記住我們的第一個按鈕有一個字母 w 的innerHTML。

24
00:01:54,750 --> 00:01:57,190
所以如果是字母w，

25
00:01:57,300 --> 00:02:01,500
然後我們將告訴它要演奏 tom 1 鼓。

26
00:02:01,620 --> 00:02:06,870
所以我將把我註解掉的程式碼放在這裡，這樣它就可以播放

27
00:02:06,870 --> 00:02:08,830
第一鼓。

28
00:02:08,910 --> 00:02:16,710
現在第一種情況完成後，然後有一個break語句，它告訴程式碼退出switch

29
00:02:16,710 --> 00:02:20,250
語句並繼續其餘程式碼。

30
00:02:20,250 --> 00:02:25,990
現在，如果buttonInnerHTML 不恰好等於w，那麼它可能等於其他內容。

31
00:02:26,190 --> 00:02:33,360
因此，在這種情況下，我們必須指定下一個可能的場景，即如果 innerHTML 是

32
00:02:33,510 --> 00:02:36,610
a，即第二個按鈕被點選。

33
00:02:36,780 --> 00:02:44,740
好吧，在這種情況下，我們將播放下一個聲音，我們將播放 tom-2.mp3。

34
00:02:44,910 --> 00:02:48,700
我們必須再次以休息的方式結束我們的案件。

35
00:02:48,720 --> 00:02:55,380
所以 switch 語句看起來有點奇怪，因為它沒有，例如，一個左括號

36
00:02:55,380 --> 00:03:04,580
這裡和一個右括號，它實際上有一個冒號和一個break關鍵字。

37
00:03:04,740 --> 00:03:09,780
但只要知道它基本上是一樣的。冒號和break關鍵字之間是

38
00:03:09,820 --> 00:03:16,770
如果buttonInnerHTML 等於這個特定值，我們希望網站執行的所有操作

39
00:03:16,770 --> 00:03:17,540
案例。

40
00:03:17,610 --> 00:03:19,560
現在在這種情況下，

41
00:03:19,560 --> 00:03:21,710
而不是呼叫我們兩個的聲音

42
00:03:21,840 --> 00:03:27,770
音頻，我們真的應該給它一個不同的名字。

43
00:03:27,870 --> 00:03:31,520
那麼為什麼我們不將我們的第一個聲音稱為它將發出的聲音，

44
00:03:31,590 --> 00:03:38,870
那麼 tom1 和我們的第二個 tom2 是在要播放的聲音檔案之後嗎？

45
00:03:38,940 --> 00:03:44,070
請記住，如果您要在這裡更改它，那麼您也必須在這裡更改它，以便您知道

46
00:03:44,100 --> 00:03:47,230
您正在玩 tom1 並且您正在玩 tom2。

47
00:03:47,250 --> 00:03:54,600
現在我剛剛添加了鍵 s、d、j、k 和 l 的所有剩餘情況。

48
00:03:54,620 --> 00:04:00,660
所以現在我已經進去並添加了所有其他剩餘的案例，以便我們的網站知道什麼

49
00:04:00,660 --> 00:04:05,460
如果按下 s 鍵或按下 d 或 j、k、l 則執行此操作。

50
00:04:05,540 --> 00:04:09,890
現在我們得到的最後一種情況實際上是預設情況。

51
00:04:10,230 --> 00:04:16,980
現在預設值有點像 if 末尾的 else 語句。它涵蓋了所有其他場景

52
00:04:16,980 --> 00:04:18,730
我們沒有具體說明。

53
00:04:18,960 --> 00:04:27,590
如果 ButtonInnerHTML 不是 w、a、s、d，而是 1 或逗號之類的東西怎麼辦？

54
00:04:28,020 --> 00:04:30,600
那麼預設值就會在那時觸發。

55
00:04:30,630 --> 00:04:35,730
現在，即使在大多數情況下，預設情況可能永遠不會被觸發，

56
00:04:35,850 --> 00:04:41,400
包含它仍然是一個很好的做法，因為您無法總是提前預測可能會出現什麼問題

57
00:04:41,400 --> 00:04:42,030
未來，

58
00:04:42,030 --> 00:04:42,580
對嗎？

59
00:04:42,840 --> 00:04:45,890
而且它的價值可能總是出乎你的意料。

60
00:04:46,080 --> 00:04:51,540
因此，讓我們繼續新增一個用於記錄 buttonInnerHTML 的 console.log

61
00:04:51,570 --> 00:04:53,580
觸發了預設情況。

62
00:04:53,790 --> 00:05:00,510
因此，讓我們儲存並刷新我們的網站，現在您可以看到我是否單擊了這些按鈕中的任何一個

63
00:05:03,700 --> 00:05:07,450
您可以看到每次單擊按鈕都會發出不同的聲音。

64
00:05:07,570 --> 00:05:08,990
這很酷，對吧？現在

65
00:05:09,000 --> 00:05:15,820
在下一課中，我們將深入研究鍵盤事件，看看如何使用鍵盤來觸發

66
00:05:15,820 --> 00:05:19,280
這些聲音而不必按下按鈕。

67
00:05:19,380 --> 00:05:22,020
因此，對於所有這些以及更多內容，我們將在下一課中見到您。